<template>
    <div class="container">
        <mt-header title="确认订单">
            <router-link to="/shop" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
        </mt-header>
        <div></div>
        <router-link to="addressMessage" class="link">
            <div v-if="noAddress" class="noUserAddress">
                <span class="left">外卖</span>
                <span class="middle">请新增送餐地址</span>
                <span class="right">></span>
            </div>
        </router-link>
        <div class="userContainer" v-if="!noAddress">
            <router-link to="addressMessage" class="link">
                <div class="address">
                    <span class='left'>{{tag[msg.tag]}}</span>
                    <span>{{msg.address.name}}</span>
                    <span class='right'>></span>
                </div>
            </router-link>
            <div class='user'>
                <span>{{msg.name}}</span>
                <span>({{sex[msg.sex]}})</span>
                <span>{{msg.phoneName}}</span>
            </div>
            <div class="send">
                <span>{{'立即送出'}}</span>
                <span class='right' @click="chooseSendTime">
                    <span v-if="sendTime!='尽快送达'">大约{{sendTime}}送到></span>
                    <span v-else>尽快送达></span>
                </span>
            </div>
            <div class='pay'>
                <span>{{'支付方式'}}</span>
                <span class='right' @click="chooseBuyWay">{{buyWay}}></span>
            </div>
        </div>
        <div class="shopName">{{shopName}}</div>
        <div class='bodyContainer' v-for="(item,index) in cartFoods" :key="index">
            <div class="itema"><img :src="item.foodUrl"></div>
            <div class="itemb"><span>{{item.foodName}}</span></div>
            <div class="itemc"><span>￥{{item.foodMoney/100}}</span></div>
            <div class="itemd"><span>×{{item.count}}</span></div>
        </div>
        <div class="reductionContainer">
            <div>
                <span>包装费</span><span class='right'>￥{{packCost/100}}</span>
            </div>
            <div>
                <span>配送费</span><span class='right'>￥{{(distribution.distributionCost-distribution.peisong)/100}}</span>
            </div>
            <div v-if="reduction.baiyiCut[0]!=0">
                <span class='box'>百补</span><span>百亿补贴满{{reduction.baiyiCut[0]}}减{{reduction.baiyiCut[1]}}</span><span class="right red">-￥{{reduction.baiyiCut[1]}}</span>
            </div>
            <div v-if="reduction.reductionCut[0]!=0">
                <span class='box'>满减</span><span>店铺满{{reduction.reductionCut[0]}}减{{reduction.reductionCut[1]}}</span><span class="right red">-￥{{reduction.reductionCut[1]}}</span>

            </div>
            <div>
                <router-link to="accountRedBag" style="text-decoration: none;color:#000">
                    <span class='box'>红包</span>
                    <span v-if="redBag.redParperId==undefined">选择红包</span>
                    <span v-if="redBag.redParperId!=undefined">已选红包</span>
                    <span class="right red" v-if="redBag.redParperId==undefined">有{{redBagNum}}个可以选择</span>
                    <span class="right red" v-if="redBag.redParperId!=undefined">-￥{{redBag.reduction/100}}</span>
                </router-link>
            </div>
            <div v-if="mysteryBoxCut!=null">
                <span class='box'>盲盒</span>
                <span>使用盲盒</span>
                <span class="right red">-￥{{mysteryBoxCut/100}}</span>
            </div>
            <div>
                <span class='right'>
                    <span>已优惠￥<span class='red'>{{addReduction}}</span></span>
                    <span>小计￥
                        <span style='font-weight: bold;font-size:1.4rem' v-if="redBag.redParperId==undefined">{{(distribution.distributionCost-distribution.peisong+finalMoney)/100}}</span>
                        <span style='font-weight: bold;font-size:1.4rem' v-if="redBag.redParperId!=undefined">{{(distribution.distributionCost-distribution.peisong+finalMoney-redBag.reduction)/100}}</span>
                    </span>
                </span>
            </div>
        </div>
        <div class="footerContainer">
            <div>
                <span>合计:</span>
                <span class="red" v-if="redBag.redParperId==undefined">￥{{(distribution.distributionCost-distribution.peisong+finalMoney)/100}}</span>
                <span class="red" v-if="redBag.redParperId!=undefined">￥{{(distribution.distributionCost-distribution.peisong+finalMoney-redBag.reduction)/100}}</span>
            </div>
            <div><button @click="submitOrder">提交订单</button></div>
        </div>
        <mt-popup v-model="closeSendTime" position="bottom" class="popupContainer">
            <mt-picker :slots="sendTimeList" @change="changeSendTime" showToolbar class="pickerContainer">
                <span class='center'>请选择送达时间</span>
                <span class='right' @click="chooseSendTime">确定</span>
            </mt-picker>
        </mt-popup>
        <mt-popup v-model="closeBuyWay" position="bottom" class="popupContainer">
            <mt-picker :slots="buyWayList" @change="changeBuyWay" showToolbar class="pickerContainer">
                <span class='center'>请选支付方式</span>
                <span class='right' @click="chooseBuyWay">确定</span>
            </mt-picker>
        </mt-popup>
    </div>
</template>
<script>
    import {mapState,mapMutations} from 'vuex'
    import { MessageBox } from 'mint-ui'
    import axios from 'axios'
    export default{
        data(){
            return{
                buyWay:'支付宝',
                sendTime:"尽快送达",
                msg:"",
                sex:['','先生','女士'],
                tag:['','家','公司','学校'],
                noAddress:true,//标记是否不存在地址,true代表没有地址,false代表有地址
                redBagNum:0,
                mysteryBoxCut:0,
                closeSendTime:false,
                closeBuyWay:false,
                sendTimeList:[{values:["尽快送达"]}],
                buyWayList:[{values:['支付宝','微信','银行卡','QQ钱包']}]
            }
        },
        mounted(){
            this.getMysteryBox();//查看有无盲盒活动
            //设置访问buyAddress之前的上一个页面是什么
            this.setHistory('account');
            //获取可用红包的个数
            this.getUseRedBagNum();
            //获取地址
            let tokenStr=window.sessionStorage.getItem('tokenStr');
            axios({
                method:'post',
                url:'/users/getUsersAddress',
                headers:{
                    "Content-Type":"application/json",
                    'Authorization':tokenStr,
                }
            }).then(response=>{
                if(response.code==200){
                    console.log('获取地址成功');
                    if(response.obj==null||response.obj.address.length==0){
                        this.noAddress=true;
                    }else{
                        this.noAddress=false;
                        this.setAddressList(response.obj);
                        this.msg=this.address.address[this.address.default];
                    }   
                }
            });
        },
        computed:{
            ...mapState(['cartFoods','cartMessage','reduction','address','shopName','distribution','redBag','shopId']),
            packCost(){
                let sum=0;
                for(let index in this.cartFoods){
                    let item=this.cartFoods[index];
                    sum=sum+item.foodPack*item.count;
                }
                return sum;
            },
            addReduction(){
                return parseInt(this.reduction.baiyiCut[1])+parseInt(this.reduction.reductionCut[1])+this.mysteryBoxCut/100;
            },
            finalMoney(){
                return this.cartMessage.sum-this.reduction.baiyiCut[1]*100-this.reduction.reductionCut[1]*100-this.mysteryBoxCut;
            }
        },
        methods:{
            ...mapMutations(['setHistory','setAddressList']),
            getUseRedBagNum(){
                let tokenStr=window.sessionStorage.getItem("tokenStr");
                let postData={
                    shopId:this.shopId,
                    cost:this.cartMessage.sum,
                }
                this.getRequest('/redPaper/getUseRedParperNumber',postData,tokenStr).then(response=>{
                    if(response.code==200)
                        this.redBagNum=response.obj;
                })
            },
            getMysteryBox(){
                let tokenStr=window.sessionStorage.getItem("tokenStr");
                let postData={
                    shopId:this.shopId,
                }
                this.getRequest('/activity/getActivityByShop',postData,tokenStr).then(response=>{
                    if(response.code==200)
                        this.mysteryBoxCut=response.obj;
                })
            },
            submitOrder(){
                let tokenStr=window.sessionStorage.getItem("tokenStr");
                //计算总价格
                let sumCost=0;
                if(this.redBag.redParperId==undefined)
                    sumCost=this.distribution.distributionCost-this.distribution.peisong+this.finalMoney;
                else sumCost=this.distribution.distributionCost-this.distribution.peisong+this.finalMoney-this.redBag.reduction
                //计算优惠详情
                let preferential={};
                for(let item in this.reduction){
                    if(item=='reductionCut')
                        preferential['满减']=this.reduction[item][1]*100;
                    else if(item=='baiyiCut')
                        preferential['百亿']=this.reduction[item][1]*100;
                }
                if(this.mysteryBoxCut!=null)
                    preferential['盲盒']=this.mysteryBoxCut;
                if(this.redBag.redParperId!=undefined&&this.redBag.reduction!=0)
                    preferential['红包']=this.redBag.reduction;
                let shopCart={};
                for(let item in this.cartFoods){
                    shopCart[item]=this.cartFoods[item].count;
                }
                let postData={
                    msg:{
                        shopId:this.shopId,//店铺ID
                        sendTime:this.sendTime,//配送时间
                        buyWay:this.buyWay,//支付方式
                        addressId:this.address.default,//地址
                        distributionCost:this.distribution.distributionCost-this.distribution.peisong,//配送费
                        foodPack:this.packCost,//包装费
                        sumCost:sumCost,//总价格
                        sumReduction:this.addReduction,//总优惠
                        preferential:preferential,//优惠详情
                        shopCart:shopCart,//订单食物
                    }
                }
                MessageBox.confirm('是否提交订单?').then(action => {
                    if(action=="confirm"){
                        postData.msg['tag']=0;
                        axios({
                            method:'post',
                            url:'/order/createOrder',
                            data:postData,
                            headers:{
                                "Content-Type":"application/json",
                                'Authorization':tokenStr,
                            }
                        }).then(response=>{
                            if(response.code==200){
                                console.log('提交订单成功');
                                this.$router.push({name:'orderMessage',params:{orderId:response.obj}});
                            }
                        });
                    }
                }).catch(error=>{
                    postData.msg['tag']=-1;
                    axios({
                        method:'post',
                        url:'/order/createOrder',
                        data:postData,
                        headers:{
                            "Content-Type":"application/json",
                            'Authorization':tokenStr,
                        }
                    }).then(response=>{
                        if(response.code==200){
                            console.log('提交订单成功');
                            this.$router.push({name:'orderMessage',params:{orderId:response.obj}});
                        }
                    });
                });
            },
            chooseSendTime(){
                this.closeSendTime=!this.closeSendTime;
                if(this.closeSendTime)
                    this.setSendTimeList();
            },
            changeSendTime(picker,values){
                this.sendTime=values[0];
            },
            chooseBuyWay(){
                this.closeBuyWay=!this.closeBuyWay;
            },
            changeBuyWay(picker,values){
                this.buyWay=values[0];
            },
            setSendTimeList(){
                this.getRequest('/time/getLocalDateTime',null,null).then(response=>{
                    if(response.code==200){
                        this.sendTimeList=[{values:["尽快送达"]}];
                        let time=response.obj;
                        time=time.slice(0,16);
                        time=time.replace(/T/," ");
                        time=time+":00:00";
                        time=new Date(time);
                        let seconds=time.getTime();//秒数
                        let day=time.getDate();
                        let month=time.getMonth();
                        let year=time.getFullYear();
                        let endTime=new Date(year,month,day,0,0,0);
                        endTime=endTime.setDate(endTime.getDate()+1);
                        endTime=new Date(endTime);
                        let endSeconds=endTime.getTime();
                        for(let i=seconds;i<endSeconds;i=i+20*60*1000){
                            let time=new Date(i);
                            let obj=[time.getHours(),time.getMinutes()];
                            let value="";
                            for(let index in obj){
                                if(index!=0)
                                    value=value+":";
                                if(obj[index]<10)
                                    value=value+"0"+obj[index];
                                else value=value+obj[index];
                            }
                            this.sendTimeList[0].values.push(value);
                        }
                    }
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import '../style/mixin';
    @import 'mint-ui/lib/style.css';
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        @include white;
        .noUserAddress{
            position: relative;
            background-color: #fff;
            @include width-height(100%,4.5rem);
            padding:2.75rem 0 0 0.5rem;
            .left{
                @include font-size-color(1rem,#26a2ff);
                border: 1px solid #26a2ff;
                padding:0 0.5rem 0 0.5rem;
            }
            .middle{
                padding-left: 0.5rem;
                @include font-size-color(1.5rem,#000);
                font-weight: bold;
            }
            .right{
                position: absolute;
                right: 0.5rem;
                @include font-size-color(1.5rem,#666);
            }
        }
        .popupContainer{
            width:100%;
        }
        .pickerContainer{
            width:100%;
            position: relative;
            span{
                position: absolute;
                @include font-size-color(1.4rem,#666);
                padding-top:0.5rem;
            }
            .center{
                margin-left: 50%;
                transform: translateX(-4.9rem);
            }
            .right{
                right: 1rem;
            }
        }
        .userContainer{
            background-color: #fff;
            display: grid;
            @include width-height(100%,8rem);
            grid-template-rows: 25% 25% 25% 25%;
            grid-template-columns: 100%;
            margin-bottom: 0.4rem;
            .link{
                text-decoration: none;
                color: #000;
            }
            div{
                margin:0.3rem 0 0 0.3rem;
            }
            .address{
                position: relative;
                span{
                    font-size: 1.3rem;
                    font-weight: bold;
                }
                .left{
                    background-color: rgb(205, 239, 255);
                    @include font-size-color(1rem,#26a2ff);
                }
                .right{
                    position: absolute;
                    right: 0.5rem;
                    @include font-size-color(1.3rem,#666);
                }
            }
            .user{
                @include font-size-color(1rem,#666);
            }
            .send{
                position: relative;
                .right{
                    position: absolute;
                    right: 0.5rem;
                    @include font-size-color(1rem,#26a2ff);
                }
            }
            .pay{
                position: relative;
                .right{
                    position: absolute;
                    right: 0.5rem;
                    @include font-size-color(1rem,#26a2ff);
                }
            }
        }
        .shopName{
                background-color: #fff;
                padding:0.3rem 0 0.3rem 1.2rem;
                @include font-size-color(1.1rem,#000);
        }
        .bodyContainer{
            margin-top:0.1rem;
            padding-left: 0.3rem;
            background-color: #fff;
            @include width-height(100%,4rem);
            display: grid;
            grid-template-rows: 50% 50%;
            grid-template-columns: 20% 60% 20%;
            grid-template-areas: "a b c"
                                 "a d d";
            div{
                margin:0.3rem 0 0.3rem 0;
            }
            span{
                @include font-size-color(1rem,#666);
            }
            .itema{
                grid-area: a;
                img{
                    @include width-height(50px,50px);
                    border-radius: 0.5rem;
                    padding-left: 1rem;
                }
            }
            .itemb{
                grid-area: b;
            }
            .itemc{
                grid-area: c;
            }
            .itemd{
                grid-area: d;
            }
        }
        .reductionContainer{
            width:100%;
            background-color: #fff;
            div{
                position: relative;
                margin:0.2rem 0 0.5rem 0.3rem;
                padding-top: 0.5rem;
            }
            .right{
                position: absolute;
                right: 0.5rem;
            }
            .box{
                background-color: rgb(250, 60, 60);
                @include font-size-color(1rem,#fff);
                padding:0 0.3rem 0 0.3rem;
                border-radius: 0.5rem;
                margin-right: 0.5rem;
            }
            .red{
                @include font-size-color(1rem,rgb(250, 60, 60));
            }
        }
        .footerContainer{
            @include width-height(100%,3rem);
            background-color: #fff;
            display: grid;
            grid-template-columns: 70% 30%;
            grid-template-rows: 100%;
            position: fixed;
            bottom: 0;
            span{
                @include font-size-color(1.1rem,#000);
                line-height: 2.5rem;
            }
            .red{
                @include font-size-color(1.5rem,rgb(250, 60, 60));
                font-weight: bold;
            }
            button{
                @include blue;
                @include width-height(85%,2.5rem);
                border:0;
                border-radius: 1rem;
                @include font-size-color(1.1rem,#fff);
            }
        }
    }
</style>
